import React from 'react';
import { Carousel, Icon, Tooltip } from 'antd';
import styles from '../../../index.less';

const TextScroll = props => {
  const { agentInfo, getStayToThingId } = props;

  return (
    <div className={styles.TextScroll}>
      <Carousel autoplay dots={false} dotPosition="right">
        {agentInfo.map(item => (
          <Tooltip placement="topLeft" title={item.taskName}>
            <div
              onClick={() => getStayToThingId(item)}
              key={item.id}
              style={{
                width: '70%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              <Icon type="sound" theme="filled" /> &nbsp;
              {item.taskName}
            </div>
          </Tooltip>
        ))}
      </Carousel>
    </div>
  );
};

export default TextScroll;
